<template>
  <div id="box" v-show="tips">
    <div class="box-tips">
     <div>确定要删除该宝贝吗？</div>
     <div>
      <span @click="updateTips('delete')">残忍删除</span>
      <span @click="updateTips('reserve')">我再想想</span>
     </div>
   </div>
  </div>
</template>
<script>
export default {
   name: 'MessageBox',
   props:['tips'],
   data() {
     return {
    
     }
   },
   methods:{
    updateTips(tag){
      this.$emit('message',tag)
    }
   }
};
</script>
<style lang='less' scoped>
#box{
  position: absolute;
  background-color: rgba(0, 0, 0, 0.103);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  .box-tips{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 20rem;
    height: 10rem;
    background-color: white;
    padding: 1rem;
    div{
      &:first-child{
        margin-top: 3rem;
        margin-bottom: 2rem;
        font-size: 1.5rem;
        text-align: center; 
      }
      &:last-child{
      span{
        &:first-child{
          font-size: 1.2rem;
          color: gray;
        }
        &:last-child{
          font-size: 1.7rem;
          margin-left: 7rem;
          color: orange;
          font-weight: bold;
        }
      }
      }
    }
  }
}
</style>